<template>
  <div id="billpdf" class="view-container">
    <div class="bill-bg-1" />
    <div class="bill-bg-2" />
    <div class="flex-row space-btw">
      <div class="black">房产地址：{{ billInfo.address }}</div>
      <div ref="download" class="red download" @click="getPDF">下载账单</div>
    </div>
    <div class="flex-row space-btw" style="line-height:60px">
      <div class="title big-title">{{ formatMonth(billInfo.billDate) }}</div>
      <div class="black">月结单</div>
    </div>
    <div style="margin-bottom:10px;">账单周期：{{ dateFormat2(billInfo.beginDate) }} - {{ dateFormat2(billInfo.endDate) }}</div>
    <div style="margin-bottom:40px;">结算日期：{{ dateFormat2(billInfo.issueDate) || '--' }}</div>
    <div class="flex-row bottom-line">
      <div class="title">收入</div>
      <div style="margin: 0 10px;">Income</div>
      <div class="black margin-l-auto">$ {{ billInfo.totalIn }}</div>
    </div>
    <div v-for="(item, index) in billInfo.inList" :key="`in-${index}`" class="flex-row space-btw item">
      <div><div>{{ item.name }}</div><div>{{ item.englishName }}</div></div>
      <div>$ {{ item.fee }}</div>
    </div>
    <div class="flex-row bottom-line">
      <div class="title">支出</div>
      <div style="margin: 0 10px;">Expenditure</div>
      <div class="black margin-l-auto">$ {{ billInfo.totalOut }}</div>
    </div>
    <div v-for="(item, index) in billInfo.outList" :key="`out-${index}`" class="flex-row space-btw item">
      <div><div>{{ item.name }}</div><div>{{ item.englishName }}</div></div>
      <div>$ {{ item.fee }}</div>
    </div>
    <div class="bottom-line" style="margin-top:40px;" />
    <div class="flex-row space-btw" style="margin:20px 0;">
      <div><div class="title">结余费用</div><div>Current contingency reserve</div></div>
      <div class="amount">$ {{ billInfo.settlementFee || 0 }}</div>
    </div>
    <div v-if="type === 1" class="flex-row space-btw" style="margin:20px 0;">
      <div><div class="title grey-text">往期留存金额</div><div>Previous contingency reserve</div></div>
      <div class="amount grey-text">$ {{ billInfo.pastBalance || 0 }}</div>
    </div>
    <div v-if="type === 1" class="flex-row space-btw" style="margin:20px 0;">
      <div><div class="title grey-text">本期留存金额</div><div>Current contingency reserve</div></div>
      <div class="amount grey-text">$ {{ billInfo.balance || 0 }}</div>
    </div>
    <div v-if="type === 1" class="flex-row space-btw" style="margin:20px 0;">
      <div><div class="title">转给业主金额</div><div>Transferred amount</div></div>
      <div class="amount">$ {{ billInfo.transFee || 0 }}</div>
    </div>
    <div class="bottom-line" style="margin-top:40px;" />
    <div>备注：</div>
    <div class="remark">{{ billInfo.remark }}</div>
  </div>
</template>

<script>
import { getBillM } from '@/api/billing'
import { dateFormat2, formatMonth } from '@/utils/common'

export default {
  data() {
    return {
      dateFormat2,
      formatMonth,
      billId: this.$route.query.billId || null,
      type: +this.$route.query.type || 0,
      billInfo: {}
    }
  },
  computed: {
    remain() {
      return (this.billInfo.totalIn * 1 - this.billInfo.totalOut * 1 - this.billInfo.balance).toFixed(2)
    }
  },
  created() {
    if (this.billId) {
      this.billDetail(this.billId)
    }
  },
  methods: {
    billDetail(id) {
      getBillM(id).then(response => {
        this.billInfo = response.data || {}
      })
    },
    getPDF() {
      const downloadTag = this.$refs.download
      const title = `${this.billInfo.address}_${formatMonth(this.billInfo.billDate)}_账单`
      downloadTag.style.color = 'white'
      this.getPdf('billpdf', title)
      downloadTag.style.color = 'red'
    }
  }
}
</script>

<style lang="scss" scoped>
.view-container {
  position: relative;
  margin: 0 auto;
  padding: 80px 100px;
  width: 1200px;
  font-size: 14px;
  font-weight: normal;
  color: #606266;
  line-height: 20px;
}

.bill-bg-1 {
  position: absolute;
  right: 50px;
  width: 200px;
  height: 600px;
  background: url('../../assets/images/bg-1.png') center center no-repeat;
  background-size: contain;
}

.bill-bg-2 {
  position: absolute;
  bottom: 0;
  left: 50px;
  width: 200px;
  height: 600px;
  background: url('../../assets/images/bg-2.png') center center no-repeat;
  background-size: contain;
}

.black {
  color: black;
}

.space-btw {
  justify-content: space-between;
}

.margin-l-auto {
  margin-left: auto;
}

.title {
  font-size: 16px;
  font-weight: bold;
  color: black;
}

.big-title {
  font-size: 22px;
}

.download {
  flex-shrink: 0;
  color: red;
  text-decoration: underline;
  cursor: pointer;
  z-index: 500;
}

.bottom-line {
  line-height: 28px;
  margin: 20px 0;
  border-bottom: 1px solid #DCDFE6;
}

.item {
  margin: 10px 0;
}

.remark {
  white-space: pre-line;
}

.amount {
  font-size: 16px;
  color: #5AC6B7;
}

.grey-text {
  color: #606266;
}
</style>
